<template>
    <div class="login df">

        <div class="loginbox df  ">
            <h3>系统登陆</h3>
            <div class="form df">
                <div class="inputbox ">
                    <i class="iconfont icon-user us"></i>
                    <input type="text" v-model="formData.account">
                </div>
                <div class="inputbox ">
                    <i class="iconfont icon-password us"></i>
                    <input :type="flag?'text':'password'" v-model="formData.password">
                    <i @click="flag=!flag" :class="flag?'iconfont icon-eye-open close':'iconfont icon-eye-close close'"> </i>
                </div>
                <div class="inputbox  ">
                   <button class="btn">登录</button>
                </div>
            </div>
        </div>

    </div>
</template>a

<script>
export default {
    data() {
    return {
      //表单数据
      formData: {
        account: '',
        password: '',
      },
      //眼睛
      flag: false,
    }
  },

}
</script>

<style lang="scss" scoped>
html {
    width: 100%;
    height: 100%;
}

.login {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #2d3a4b;

    .loginbox {
        width: 450px;
        height: 100px;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        h3 {
            color: #eeeeee;
            margin-bottom: 56px;
        }

        .form {
            width: 100%;
            height: 100%;
            flex-direction: column;
            // background-color: red;
            justify-content: center;
            align-items: center;

            .inputbox {
                width: 444px;
                height: 40px;
                // background-color: red;
                margin-bottom: 22px;
                position: relative;

                .us {
                    position: absolute;
                    bottom: 6px;
                    left: 5px;
                    color: #949aa1;
                }
                .close{
                    position: absolute;
                    bottom: 6px;
                    right: 5px;
                    color: #949aa1;

                }

                input {
                    width: 444px;
                    height: 30px;
                    border: none;
                    padding: 0px 28px;
                    border: 1px solid #949aa1;
                    border-radius: 3px;
                    background-color: transparent;
                    outline: none;
                    color: #fff;
                }
                .btn{
                    width: 100%;
                    height: 100%;
                    border: none;
                    border-radius: 3px;
                    font-size: 14px;
                    height: 34px;
                    background-color: #409eff;
                    color: #eeeeee;
                    
                }

            }
        }


    }
}
</style>